<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <!--    react-dom.js 支持react有关的DOM操作-->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!--    jsx-->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">

</div>
</body>
</html>
<script type="text/babel">
    let app=document.getElementById('app');
    class Child1 extends React.Component{
        //构造函数
        constructor(props) {
            super(props);
            this.childClick4=this.childClick4.bind(this,"9999","不想考试呀")
        }
        render() {
            return <fieldset>
                <legend>
                    <h2>React中的事件</h2>
                </legend>
                <button onClick={this.childClick1}>点击1</button>
                <hr/>
                <button onClick={this.childClick2.bind(this,"哈哈哈",9999)}>点击2</button>
                <hr/>
                <button onClick={()=>this.childClick3("333",'猴赛雷')}>按钮3</button>
                <hr/>
                <button onClick={this.childClick4}>按钮4</button>
            </fieldset>
        };
        childClick1(){
            console.log("点击了")
        };
        childClick2(a,b){
            console.log(this);
            console.log(event);
            console.log(a,b)
        }
        childClick3(m,n){
            console.log(this);
            // console.log(event);
            console.log(m,n)
        }
        childClick4(m,n){
            console.log(this);
            // console.log(event);
            console.log(m,n)
        }
    }
    ReactDOM.render(<Child1/>,app)
//    React中的事件绑定
//     事件名首字母大写:如onClick onMouseleave等
    /*
    写法1:on事件名={this.函数名}
    特点:无法传参
    写法2:on事件名={this.函数名.bind(this,实参列表)}
    特点:
    1,可以传参
    2,可以访问this
    3,函数里通过event获取事件对象
    写法3:on事件名={()=>this.函数名(参数列表)}
    写法4:将bind改变this执行的代码提前在组件的construction函数里声明,这样只需要改变一次this的指向就可以啦
    * */
</script>